(function() {
    var bannerImg = document.getElementById('banner-img');
    var bannerDot = document.getElementById('dot');
    var list = bannerDot.querySelectorAll('li');
    var banner = document.getElementById('banner');
    // 节流锁
    var lock = true;
    var idx = 1;

    function setDOt(idx) {
        //清除li的className
        for (var i = 0; i < list.length; i++) {
            list[i].className = '';
        }
        //修改图片的路径
        bannerImg.src = 'image/banner0' + idx + '.png';
        //给小li上色
        list[idx - 1].className = 'backcolor';
    }
    bannerDot.onmouseover = function(e) {
            // 判断节流锁的状态，如果是关闭的，那么就什么都不做
            if (!lock) return;
            // 关锁
            lock = false;

            if (e.target.tagName.toLowerCase() == 'li') {
                // 获取第几张图片
                var idx = e.target.getAttribute('data-n');
                // //清除li的className
                // for (var i = 0; i < list.length; i++) {
                //     list[i].className = '';
                // }
                // //修改图片的路径
                // bannerImg.src = 'image/banner0' + dataN + '.png';
                // //给小li上色
                // e.target.className = 'backcolor';

                setDOt(idx);

            }
            // 开锁，动画结束之后开锁
            setTimeout(function() {
                lock = true;
            }, 10);
        }
        //自动播放
    var time = setInterval(function() {
            if (idx < 3) {
                setDOt(idx);
                idx++;
            } else if (idx == 3) {
                setDOt(idx);
                idx = 1;
            }


        }, 2000)
        //鼠标进入时停止播放
    banner.onmouseenter = function() {
            clearInterval(time);
        }
        // 鼠标离开时自动播放
    banner.onmouseleave = function() {
        clearInterval(time);
        time = setInterval(function() {
            if (idx < 3) {
                setDOt(idx);
                idx++;
            } else if (idx == 3) {
                setDOt(idx);
                idx = 1;
            }
        }, 2000)

    }



})()